<template>
	<div style="padding-left: 0.1rem;padding-right: 0.1rem; height: 100%;">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<el-row :gutter="5">
					<el-col :span="5">
						<h2 style="padding-top: 0.5rem;">医生详细信息总览</h2>
					</el-col>
					<el-col :span="3" :offset="12">

						<el-button type="primary" @click="adddoctorbefore">新增医生<i
								class="el-icon-plus el-icon--right"></i>
						</el-button>
					</el-col>
					<el-col :span="4">
						<el-tooltip class="item" effect="light" content="ID编号 姓名 所属科室 联系方式" placement="top-start">
							<el-input v-model="search" suffix-icon="el-icon-search" placeholder="输入关键字搜索" />
						</el-tooltip>
					</el-col>
				</el-row>
			</div>
			<div>
				<el-table height="600" script ref="filterTable multipleTable" :data="table.filter(data => !search
							||data.phone.toLowerCase().includes(search.toLowerCase())
							||data.name.toLowerCase().includes(search.toLowerCase())
							||data.inroom.toLowerCase().includes(search.toLowerCase())
							||data.dID.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">

					<!-- 医生详细信息展示 -->
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-form label-position="left" inline class="demo-table-expand">
								<el-form-item label="医生编号">
									<span>{{ props.row.dID }}</span>
								</el-form-item>
								<el-form-item label="医生姓名">
									<span>{{ props.row.name }}</span>
								</el-form-item>
								<el-form-item label="联系电话">
									<span>{{ props.row.phone }}</span>
								</el-form-item>
								<el-form-item label="所属科室">
									<span>{{ props.row.inroom }}</span>
								</el-form-item>
								<el-form-item label="职务名称">
									<span>{{ props.row.post }}</span>
								</el-form-item>
								<el-form-item label="薪资">
									<span>{{ props.row.salary }}</span>
								</el-form-item>
								<el-form-item label="入职时间">
									<span>{{ props.row.entryTime }}</span>
								</el-form-item>
								<el-form-item label="家庭住址">
									<span>{{ props.row.address }}</span>
								</el-form-item>
								<el-form-item label="可挂号数量">
									<span>{{ props.row.registAmount }}</span>
								</el-form-item>
								<el-form-item label="个人介绍">
									<span>{{ props.row.profile }}</span>
								</el-form-item>
							</el-form>
						</template>
					</el-table-column>
					<el-table-column prop="dID" label="医生编号">
					</el-table-column>
					<el-table-column prop="name" label="医生姓名">
					</el-table-column>
					<el-table-column prop="phone" label="联系方式">
					</el-table-column>

					<!-- 医生所属科室筛选功能 -->
					<el-table-column prop="inroom" label="所属科室"
						:filters="[{text: '口腔科', value: '口腔科'}, {text: '内科', value: '内科'},{text: '骨科', value: '骨科'}]"
						:filter-method="filterHandler">
					</el-table-column>
					<el-table-column prop="address" label="家庭地址">
					</el-table-column>

					<!-- 编辑医生信息和删除医生信息 -->
					<el-table-column prop="" align="right" label="操作">
						<!-- 编辑和删除操作 -->
						<template slot-scope="scope">
							<el-button type="primary" size="mini"
								@click.native.prevent="editdoctor(scope.$index, table)" icon="el-icon-edit">
							</el-button>
							<el-button type="danger" size="mini" @click.native.prevent="deleteRow(scope.$index, table)"
								icon="el-icon-delete"></el-button>
						</template>
					</el-table-column>
				</el-table>

			</div>
		</el-card>


		<!-- 新增医生信息 -->
		<el-dialog title="新增医生信息" :visible.sync="dialogFormVisible1">
			<el-form class="demo-ruleForm" :model="form1" :rules="rules" ref="form1" label-position="right"
				label-width="80px">
				<el-row :gutter="20">
					<el-col :span="10">
						<el-form-item label="ID编号">
							<el-input placeholder="自动生成无需输入" disabled v-model="form1.dID"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="姓名" prop="name">
							<el-input v-model="form1.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系方式" prop="phone">
							<el-input v-model="form1.phone"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="所在科室" prop="inroom">
							<el-input v-model="form1.inroom"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="职务" prop="post">
							<el-input v-model="form1.post"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="入职时间">
							<el-input v-model="form1.entryTime"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="薪资" prop="salary">
							<el-input v-model="form1.salary"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="挂号总量">
							<el-input v-model="form1.registAmount"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="18">
						<el-form-item label="地址">
							<el-input v-model="form1.address"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="自我介绍">
							<el-input v-model="form1.profile" type="textarea" :rows="8"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="adddoctorafter('form1')">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 编辑医生信息 -->
		<el-dialog title="编辑医生信息" :visible.sync="dialogFormVisible2">
			<el-form label-position="right" label-width="80px">
				<el-row :gutter="20">
					<el-col :span="10">
						<el-form-item label="ID编号">
							<el-input :disabled="true" v-model="form2.dID"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="姓名">
							<el-input v-model="form2.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系方式">
							<el-input v-model="form2.phone"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="所在科室">
							<el-input v-model="form2.inroom"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="职务">
							<el-input v-model="form2.post"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="入职时间">
							<el-input v-model="form2.entryTime"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="薪资">
							<el-input v-model="form2.salary"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="挂号总量">
							<el-input v-model="form2.registAmount"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="18">
						<el-form-item label="地址">
							<el-input v-model="form2.address"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="自我介绍">
							<el-input v-model="form2.profile" type="textarea" :rows="8"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible2 = false">取 消</el-button>
				<el-button type="primary" @click="editdoctorafter">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {

				// 分页时需要用到的数据
				// pagesize: 10, //默认分页每页数据量
				// currentPage: 1, //默认展示第一页数据
				random: 10, //随机生成的字符串组合
				nextindex: 0,
				table: {
					salary: '',
					dID: '',
					name: '',
					phone: '',
					inroom: '',
					post: '', //职务
					entryTime: '',
					registAmount: '', //可挂号的数量
					address: '', //地址
					profile: '' //个人介绍
				},
				dialog: false,
				loading: false,
				form1: {
					dID: '',
					name: '',
					phone: '',
					inroom: '',
					post: '',
					salary: '',
					entryTime: '',
					registAmount: '',
					address: '',
					profile: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入医生姓名',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: '请选择联系方式',
						trigger: 'blur'
					}],
					inroom: [{
						required: true,
						message: '请选择科室名称',
						trigger: 'blur'
					}],
					post: [{
						required: true,
						message: '请选择职务',
						trigger: 'blur'
					}],
					salary: [{
						required: true,
						message: '请选择薪水',
						trigger: 'blur'
					}],
				},
				form2: {
					dID: '',
					name: '',
					phone: '',
					inroom: '',
					post: '',
					salary: '',
					entryTime: '',
					registAmount: '',
					address: '',
					profile: ''
				},
				activeName: 'first',
				delID: '',
				delpassword: '',
				ysxx: {
					name: '',
					region: '',
					type: ''
				},
				//内嵌表单---添加医生
				dialogFormVisible1: false,
				//内嵌表单---修改医生信息
				dialogFormVisible2: false,
				formLabelWidth: '120px',
				search: '',
			};
		},
		mounted: function() {
			this.$axios.get('http://localhost:8080/table.json').then((result) => {
				console.log(result.data);
				this.table = result.data
			}).catch((err) => {
				console.log(err);
			});
		},
		methods: {
			deleteRow(index, rows) {
				//index数组的角标，rows储存数据的数组
				//验证删除数据的格式
				//console.log(rows);
				//console.log(index);
				//console.log(rows[index].dID);
				//形式上的删除
				this.$confirm('此操作将删除该医生, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					rows.splice(index, 1);
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
				
			},
			//添加医生信息按钮
			adddoctorbefore() {
				this.dialogFormVisible1 = true;
				// console.log(list)
				// console.log(table)
			},
			//输入医生信息点击
			adddoctorafter(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$message({
							message: '添加成功',
							type: 'success'
						});
						let dID = this.randomString(this.random);
						console.log(dID);
						this.form1.dID = dID;
						//this.form1.dID;
						let name = this.form1.name;
						let phone = this.form1.phone;
						let inroom = this.form1.inroom;
						let address = this.form1.address;
						let salary = this.form1.salary;
						let post = this.form1.post;
						let entryTime = this.form1.entryTime;

						let registAmount = this.form1.registAmount;
						let profile = this.form1.profile;
						var list = {
							dID,
							name,
							phone,
							inroom,
							address,
							salary,
							post,
							entryTime,
							registAmount,
							profile
						}
						this.table.push(list)
						this.form1 = this.$options.data().form1;
						this.dialogFormVisible1 = false;
					} else {
						console.log('error submit!!');
						return false;
					}
				});

			},
			editdoctor: function(index, rows) {
				this.nextindex += index;
				//console.log(this.nextindex);
				this.dialogFormVisible2 = true;
				this.form2.dID = rows[index].dID;
				this.form2.name = rows[index].name;
				this.form2.phone = rows[index].phone;
				this.form2.inroom = rows[index].inroom;
				this.form2.address = rows[index].address;
				this.form2.post = rows[index].post;
				this.form2.salary = rows[index].salary;
				this.form2.entryTime = rows[index].entryTime;
				this.form2.registAmount = rows[index].registAmount;
				this.form2.profile = rows[index].profile;
			},
			editdoctorafter() {
				this.dialogFormVisible2 = false;
				this.table[this.nextindex] = this.form2;
				this.nextindex = 0;
				//console.log(this.nextindex);

			},
			//分页时的代码
			// handleSizeChange: function(val) {
			// 	this.pagesize = val;
			// },
			// handleCurrentChange: function(currentPage) {
			// 	this.currentPage = currentPage;
			// },
			filterHandler(value, row, column) {
				const property = column['property'];
				return row[property] === value;
			},
			randomString(length) {
				var str = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
				var result = '';
				for (var i = length; i > 0; --i) {
					result += str[Math.floor(Math.random() * str.length)];
				}
				return result;
				//console.log(result)
			}
		},

	};
</script>

<style>
	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}

	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
		padding-top: 0.3125rem;
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 100%;
	}
</style>
